<template>
	<div>
		<div class="menberConTitle flex" style="justify-content: space-between;">
			<div class="tableTitle">代表文章专著</div>
			<div>
				<el-button type="primary" size="mini" class="titleBtn" round @click="toAddPage('/entrance/teammanagement/addarticle')">新增</el-button>
			</div>
		</div>
		<div class="tableDataBox flex">
			<el-table :data="pageData" style="width: 100%">
				<el-table-column prop="publishDate" label="发表日期"></el-table-column>
				<el-table-column prop="periodical" label="发表期刊"></el-table-column>
				<el-table-column prop="articleTitle" label="文章名称"></el-table-column>
				<el-table-column prop="link" label="链接">
					<template slot-scope="scope">
						<div class="_blankLink" v-if="scope.row.link">
							<a :href="scope.row.link"
							 target="_blank">
								{{ scope.row.link }}
							</a>
						</div>
						<div v-else>未添加链接</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isOpen == 1" @click="setIsOpen(scope.row)">不公开</el-button>
						<el-button type="text" v-else @click="setIsOpen(scope.row)">公开</el-button>
						<el-button type="text" @click="toAddPage(`/entrance/teammanagement/addarticle?index=${scope.$index}`)">修改</el-button>
						<el-button type="text" style="color: #F42929;" @click="deleteRow(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import add from '../utils/index.js'
	export default {
		data() {
			return {
				pageData: add.data.delegateArticle,
				handlerTime: '',
				// uploadFileIndex: ''
			}
		},
		mounted() {
			
		},
		watch: {
			handlerTime(newValue) {
				this.pageData = add.data.delegateArticle
			}
		},
		methods: {
			toAddPage(url) {
				// 跳转到新增页面
				this.$router.push(url)
			},
			// 教育经历
			setIsOpen(row) {
				// 是否公开
				if(row.isOpen == '1'){
					row.isOpen = '0'
				} else {
					row.isOpen = '1'
				}
				this.setHandlerTime()
			},
			deleteRow(index) {
				add.article.remove(index)
			},
			// getIndex(index) {
			// 	// 获取上传图片的数组下标
			// 	this.uploadFileIndex = index
			// },
			// uploadFile(file) {
			// 	// 上传文件
			// 	let File = file.file
			// 	add.uploadFile(File, (data) => {
			// 		add.research.getSelf(this.uploadFileIndex, (obj) => {
			// 			obj.image = data
			// 		})
			// 		this.$message.success('上传成功')
			// 		this.setHandlerTime()
			// 	})
			// },
			setHandlerTime() {
				this.handlerTime = new Date().getTime()
			}
		}
	}
</script>

<style scoped="scoped">
	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		font-size: 16px;
		color: #333333;
		align-items: center;
		/* margin-bottom: 20px; */
		margin-top: 30px;
	}
	.tableImages {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}
	._blankLink {
		width: 140px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
